<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通讯录</title>
    <link rel="stylesheet" href="assets/css/amazeui.css">
    <link rel="stylesheet" href="assets/css/admin.css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/amazeui.min.js"></script>
</head>
<body>
<header class="am-topbar am-topbar-inverse">
    <div style="margin: 15px 0 0 20px"><h1>通讯录</h1></div>

</header>

<div style="clear: both"></div>
<!--新增-->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="add">
    <div class="am-modal-dialog" style="background-color: #ffffff">
        <div class="am-modal-hd"><br />
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <table class="am-table am-table-bordered">
               <tr><td>姓名</td><td><input></td></tr>
                <tr><td>性别</td><td><input></td></tr>
                <tr><td>住址</td><td><input></td></tr>
                <tr><td>联系电话</td><td><input></td></tr>
                <tr><td>电子邮件</td><td><input></td></tr>
            </table>
            <button type="button" onclick="" class="am-btn am-btn-primary am-btn-block">添加</button>
        </div>
    </div>
</div>
<!--新增-->
<!--修改-->
<div class="am-modal am-modal-no-btn"  tabindex="-1" id="modify">
    <div class="am-modal-dialog" style="background-color: #ffffff">
        <div class="am-modal-hd"><br />
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <table class="am-table am-table-bordered">
                <tr><td>姓名</td><td><input></td></tr>
                <tr><td>性别</td><td><input></td></tr>
                <tr><td>住址</td><td><input></td></tr>
                <tr><td>联系电话</td><td><input></td></tr>
                <tr><td>电子邮件</td><td><input></td></tr>
            </table>
            <button type="button" onclick="" class="am-btn am-btn-primary am-btn-block">添加</button>

        </div>
    </div>
</div>
<!--修改-->
<div style="margin:auto;padding:15px;border: 1px solid #dddddd;box-shadow:1px 1px 1px 1px #0D0D0D;width:80%;">
    <br />
    <input><button class="am-btn am-btn-primary am-btn-xs"style="margin:0 20px 0 10px">查询</button><button class="am-btn am-btn-primary am-btn-xs" data-am-modal="{target: '#add', closeViaDimmer: 0, width: 400, height: 375}">新增</button>
    <br /><br />
    <table class="am-table am-table-bordered">
        <thead>
        <th>姓名</th><th>性别</th><th >住址</th><th>联系电话</th><th>电子邮件</th><th>操作</th>
        </thead>
        <tbody>
        <td>12</td><td>213</td><td>12</td><td>213</td><td>12</td><td><div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modify', closeViaDimmer: 0, width: 400, height: 375}"><span class="am-icon-pencil-square-o"></span> 修改</button>
                <button type="button" style="color: red" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-trash"></span> 删除</button>
            </div>
            </div></td>
        </tbody>
    </table>
</div>
</body>
</html>